<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 200%;
      width: 200%;
    }

    div {
      height: 100px;
      width: 100px;
      background-color: aqua;
      border: 1px solid #ccc;
      padding: 5px 2px;
      position: absolute;
      left: calc(50% - 50px);
      top: calc(50% - 50px);
    }
  </style>
</head>

<body>
  <div id="div"></div>
  <script>
    let div = document.getElementById('div')
    console.log('offset', div.offsetWidth, div.offsetHeight, div.offsetLeft, div.offsetTop)
    console.log('client', div.clientHeight, div.clientWidth, div.clientLeft, div.clientTop)
    console.log('scroll', div.scrollHeight, div.scrollWidth, div.scrollLeft, div.scrollTop)
    div.addEventListener('click', function (e) {
      console.log('client', e.clientX, e.clientY)
      console.log('page', e.pageX, e.pageY)
      console.log('screen', e.screenX, e.screenY)
      console.log('offset', e.offsetX, e.offsetY)
    })       
  </script>
</body>

</html>